<template>
  <div class="specification-table">
    <el-table size="small" :data="specificationValues">
      <el-table-column label="规格值" prop="name" align="center">
        <template #default="{ row }">
          <el-button size="small" plain type="warning"
            >{{ row.name }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="图片" prop="img" align="center">
        <template #default="{ row }">
          <el-image
            v-if="row.img"
            style="width: 50px; height: 50px"
            preview-teleported
            :src="row.img"
            :preview-src-list="[row.img]"
            :initial-index="0"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="价格(￥)"
        prop="specificationPrice"
        align="center"
      />
      <el-table-column label="状态" prop="isShow" align="center">
        <template #default="{ row }">
          <el-switch :model-value="!!row.isShow" />
        </template>
      </el-table-column>
      <el-table-column
        label="创建人"
        prop="createBy"
        :min-width="120"
        align="center"
      />
      <el-table-column
        label="更新人"
        prop="updateBy"
        :min-width="120"
        align="center"
      />
      <el-table-column
        label="创建时间"
        prop="createTime"
        :min-width="180"
        align="center"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
        :min-width="180"
        align="center"
      />
      <el-table-column label="操作" align="center" :min-width="140">
        <template #default="{ row }">
          <el-button
            plain
            size="small"
            text
            type="primary"
            @click="editClick(row)"
            >编辑
          </el-button>
          <el-button
            plain
            size="small"
            text
            type="danger"
            @click="deleteClick(row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { SingleBtns } from '@/global/constant'

interface IProps {
  specificationValues: any
}

defineProps<IProps>()

const emits = defineEmits(['editClick', 'deleteClick'])
const editClick = (row: any) => {
  emits('editClick', SingleBtns.Edit, row)
}
const deleteClick = (row: any) => {
  emits('deleteClick', SingleBtns.Delete, row)
}
</script>

<style scoped lang="less">
.specification-table {
}
</style>
